<script lang="ts" setup>
const options = [
  {
    class: 'banner_cloud',
    title: '上云精选授权',
    description: '海量授权应用等你来选'
  },
  {
    class: 'banner_safe',
    title: '安全、稳定、高效',
    description: '值得信赖的授权平台'
  },
  {
    class: 'banner_service',
    title: '工单系统上新',
    description: '提供优质服务，提高客户满意度'
  }
]
</script>

<template>
  <t-row>
    <t-swiper
      :duration="500"
      :interval="5000"
      :navigation="{ placement: 'outside' }"
      style="width: 100%"
    >
      <t-swiper-item v-for="(item, index) in options" :key="index" class="swiper_inner">
        <t-row :class="item.class" class="banner">
          <t-col class="left" :xs="7">
            <t-row class="left_inner">
              <h1>{{ item.title }}</h1>
              <p>{{ item.description }}</p>
            </t-row>
          </t-col>
        </t-row>
      </t-swiper-item>
    </t-swiper>
  </t-row>
</template>

<style lang="less" scoped>
.banner_cloud {
  background-image: url('@/assets/images/author/banner_cloud.jpg');
}

.banner_safe {
  background-image: url('@/assets/images/author/banner_safe.jpg');
}

.banner_service {
  background-image: url('@/assets/images/author/banner_service.jpg');
}

.banner {
  background-position: center;
  background-size: cover;
  width: 100%;
  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    .left_inner {
      color: #1e222d;
      display: block;
      text-align: center;
      h1 {
        font-weight: bolder;
      }
    }
  }
}

@media screen and (min-width: 1200px) {
  .banner {
    height: 350px;
  }
  h1 {
    font-size: 40px;
    letter-spacing: 5px;
    margin: 40px 0;
  }
  p {
    font-size: 20px;
  }
}

@media screen and (max-width: 1200px) {
  .banner {
    height: 250px;
  }
  h1 {
    font-size: 30px;
    letter-spacing: 3px;
    margin: 30px 0;
  }
  p {
    font-size: 15px;
  }
}

@media screen and (max-width: 1000px) {
  .banner {
    height: 150px;
  }
  h1 {
    font-size: 18px;
    letter-spacing: 0;
    margin: 15px 0;
  }
  p {
    font-size: 10px;
    letter-spacing: 0;
  }
}
</style>
